<template>
  <div>
    <!-- 轮播图广告 -->
    <swiper
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :circular="true"
      class="pic-swiper"
      indicator-active-color="#1b7dec "
      indicator-color="#d1e5fb"
      next-margin="20rpx"
      previous-margin="20rpx"
    >
      <swiper-item
        class="banner-item"
        v-for="(item, index) in images"
        :key="index"
      >
        <div class="img-box">
          <image class="banner" :src="item.imgUrl"></image>
        </div>
      </swiper-item>
    </swiper>
    <!-- 新品推荐 / 限时特惠 / 每日疯抢 -->
    <div class="cat-item">
      <dl
        class="item"
        v-for="(item, index) in titleList"
        :key="index"
        @click="toClassifyPage(item)"
      >
        <dt>
          <img :src="item.src" alt="" />
        </dt>
        <dd>{{ item.title }}</dd>
      </dl>
    </div>
    <!-- 轮播图 通知 公告 -->
    <div class="message-play" @click="onNewsPage">
      <img src="../../static/images/icon/horn.png" alt="" class="hornpng" />
      <swiper
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :circular="true"
        :vertical="true"
        class="swiper-cont"
      >
        <swiper-item class="items" v-for="(item, index) in texts" :key="index">
          {{ item.title }}
        </swiper-item>
      </swiper>
      <span class="arrow"></span>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      //轮播图属性
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 1000,
      //新品推荐 / 限时特惠 / 每日疯抢
      titleList: [
        {
          src: "../../static/images/icon/newProd.png",
          title: "新品推荐",
          id: 1,
          path:"lastedProdPage"
        },
        {
          src: "../../static/images/icon/timePrice.png",
          title: "限时特惠",
          id: 2,
          path:"discountProdList"
        },
        {
          src: "../../static/images/icon/neweveryday.png",
          title: "每日疯抢",
          id: 3,
          path:"moreBuyProdList"
        },
      ],
    };
  },
  computed: {
    ...mapState({
      images: (state) => state.home.images,
      texts: (state) => state.home.texts,
    }),
  },
  methods: {
    ...mapActions({
      homeImages: "home/homeImages",
      homeTexts: "home/homeTexts",
    }),
    onNewsPage() {
      wx.navigateTo({
        url: "/pages/recent-news/index",
      });
    },
    toClassifyPage(item){
      wx.navigateTo({
        url: `/pages/prod-classify/index?path=${item.path}`,
      });
      wx.setNavigationBarTitle({title:item.title})
    }
  },
  mounted() {
    this.homeImages();
    this.homeTexts();
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}
.pic-swiper {
  margin-top: 75rpx;
  padding: 10rpx 0;
  background: #fff;
  height: 422rpx;
}
swiper {
  width: 100%;
  height: 350rpx;
  overflow: hidden;
}
swiper-item {
  font-size: 26rpx;
  font-weight: bold;
}
.banner-item {
  box-sizing: border-box;
}
.banner {
  position: absolute;
  width: 690rpx;
  margin: 0 10rpx;
  height: 402rpx;
  border-radius: 8rpx;
  display: inline-block;
  box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
}
.cat-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
}
.item {
  text-align: center;
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
}
.item > dt > img {
  width: 75rpx;
  height: 75rpx;
}
.item > dd {
  font-size: 26rpx;
  margin-top: 15rpx;
}
.message-play {
  position: relative;
  height: 90rpx;
  background: #fff;
  margin: auto;
  padding: 0 60rpx 0 100rpx;
  box-sizing: border-box;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
  border: 2rpx solid #fafafa;
}
.hornpng {
  width: 77rpx;
  height: 36rpx;
  position: absolute;
  left: 20rpx;
  top: 27rpx;
  margin-right: 8rpx;
}
.swiper-cont {
  height: 90rpx;
  line-height: 90rpx;
}
.items {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
}
.arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 3rpx solid #686868;
  border-right: 3rpx solid #686868;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 34rpx;
}
</style>